import { useEffect, useRef } from "react";
import "./home.css";
import HomeLeft from "../components/HomeLeft/HomeLeft";
import MyEcharts from "../components/MyEcharts/MyEcharts";
import HomeButton from "../components/HomeButton/HomeButton";
import HomeRight from "../components/HomeRight/HomeRight";
import HomeCenter from "../components/HomeCenter/HomeCenter";
function Home() {
  const screen = useRef(null);
  const getscale = (w = 1920, h = 1080) => {
    const sw = window.innerWidth / w;
    const sh = window.innerHeight / h;
    return sw > sh ? sh : sw;
  };
  const resize = () => {
    const scale = getscale();
    screen.current.style = `transform: scale(${scale}); transform-origin: 0px 0px`;
  };
  useEffect(() => {
    resize();
    window.addEventListener("resize", () => {
      resize();
    }); 
  }, []);

  return (
    <div className="home-box" ref={screen}>
      <div className="home-header"></div>
      <div className="home-left">
        <div className="home-left-top">
          <HomeLeft />
        </div>
        <div className="home-left-bottom">
          <MyEcharts />
        </div>
      </div> 
      <div className="home-center">
        <HomeCenter />
      </div>
      <div className="home-right">
        <HomeRight />
      </div>
      <div className="home-bottom">
        <HomeButton />
      </div>
    </div>
  );
}

export default Home;


